<template>
    <div class="page-wrap">
        <page-title></page-title>
        <div class="page-content ">
            <div class="page-column">
                <!-- 表格搜索区域 -->
                <div class="search-box">
                    <div class="search-left">
                        <el-button type="primary" class="m-r-12" size="medium" icon="el-icon-circle-plus"
                            @click="addFun">自定义流程
                        </el-button>
                        <el-button size="medium" @click="mulDeleteFun" icon="el-icon-delete"
                            :disabled="selection.length == 0">删除
                        </el-button>
                    </div>
                    <div class="search-right">
                        <el-input class="m-r-12 search-input" size="mini" placeholder="请输入搜索内容" clearable
                            v-model="titleLike">
                            <el-button slot="append" icon="el-icon-search" @click="clickQuery"></el-button>
                        </el-input>


                    </div>
                </div>

                <!-- 表格区域 -->
                <div class="table-box">
                    <el-table :data="tableData.columnData" height="100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column label="主题" prop="title" min-width="160" align="left"></el-table-column>
                        <el-table-column label="订单类型" prop="typeName" width="160" align="center" v-if="flowType=='DD'">
                        </el-table-column>
                        <el-table-column label="售后类型" prop="typeName" width="160" align="center" v-if="flowType=='SH'">
                        </el-table-column>
                        <el-table-column label="说明" prop="descr" align="left">
                        </el-table-column>
                        <el-table-column label="状态" prop="statusName" width="100" align="center">
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button type="text" @click="editFun(scope.row)">编辑</el-button>
                                <el-button type="text" @click="deleteFun(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 表格分页区域 -->
                <div class="pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize"
                        layout="sizes,total,prev,pager,next" :current-change.sync="tableData.currentPage"
                        :current-page.sync="tableData.currentPage" :total="tableData.total">
                    </el-pagination>
                </div>
            </div>

        </div>
        <!-- 表格相关操作组件区域 -->
        <editFlow ref="flow" @refresh="clickQuery" :flowType="flowType">
        </editFlow>
    </div>
</template>
<script>
    import editFlow from './editFlow'
    import {
        szOrderFlowList,
        deleteszOrderFlow
    } from './service'
    import {
        mapState
    } from 'vuex';
    export default {
        name: '',
        // props: {
        //     flowType: String
        // },
        components: {
            editFlow
        },
        data() {
            return {
                flowType:'DD',
                ruleForm: {},
                rules: {},
                loading: false,
                activeTab: '1',
                titleLike: '',
                selection: [],
                tableData: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    orders: 'DESC',
                    columns: 'updDt',
                    columnData: []
                }
            }
        },
        created() {
            this.tableDataInit()
        },
        computed: {
            ...mapState({
                token: state => state.token.token,

            }),

        },
        methods: {
            addFun() { // 新增
                this.$refs.flow.showLayout();
            },
            editFun(item) {
                this.$refs.flow.showLayout(item);
            },
            mulDeleteFun() { // 多选删除
                let ids = this.selection.map(item => item.id).join(',');
                this.deleteFun(ids);
            },
            handleSelectionChange(selection) { // 表格复选框勾选触发
                this.selection = selection;
            },
            deleteFun(ids) {
                this.$confirm('是否删除该流程，是否确认？', {
                    title: '提示',
                    type: 'warning'
                }).then(res => {
                    let params = {
                        ids: ids
                    }
                    deleteszOrderFlow(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '删除成功！'
                            })
                            this.tableDataInit()
                        }
                    })
                }).catch((error) => {})
            },
            reset() {
                this.titleLike = ''
                this.clickQuery()
            },
            clickQuery() {
                this.tableData.currentPage = 1;
                this.tableDataInit();
            },
            tableDataInit() {
                let param = {
                    startRow: this.tableData.currentPage,
                    rowSize: this.tableData.pageSize,
                    columns: this.tableData.columns,
                    orders: this.tableData.orders,
                    titleLike: this.titleLike,
                    cate: this.flowType
                    // flowType:this.flowType,

                };
                szOrderFlowList(param).then((res) => {
                    this.tableData.columnData = [];
                    let data = res.data.data
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data.data)) {
                            this.tableData.columnData = [...data.data];
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.columnData = [];
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                })
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
                this.tableDataInit()
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.tableDataInit()
            },
        }
    }
</script>